<script setup>
import { computed } from 'vue'
import { getAssetsFiles } from '@/utils'

defineOptions({
    name: 'BiPopup'
})

const emit = defineEmits(['click', 'close'])

function handleThrowClickEvent() {
    emit('click')
}

const props = defineProps({
    type: {// 弹窗类型 default: normal  可选: task, withdraw
        type: String,
        default: 'normal'
    },
    showRewardsWord: {// 弹窗顶部文字，仅 type: normal 时可用
        type: Boolean,
        default: true
    },
    tips: {// 弹窗底部文字，仅 type: normal 时可用
        type: String,
        default: ''
    },
    displayTips: {
        type: Boolean,
        default: true
    },
    buttonText: {// 弹窗按钮文字
        type: String,
        default: 'Get More'
    },
    rewardsType: {// 奖励类型，用来展示相应的奖励图片  可选 coin, cash, all
        type: String,
        default: 'coin'
    },
    rewardsNum: {// 奖励数量
        type: [String, Number],
        default: 1
    },
    coinNum: {
        type: [String, Number],
        default: 1
    },
    cashNum: {
        type: [String, Number],
        default: 1
    },
    withdrawStatus: {// 提现状态 ture: 成功， false: 失败
        type: Boolean,
        default: true
    }
})

const rewardsImgUrl = computed(() => {
    if (props.rewardsType == 'cash') {
        return getAssetsFiles('cash.png')
    }

    return getAssetsFiles('coin.png')
})

const show = defineModel('show', { required: true })
</script>
<template>
    <div class="popup">
        <van-popup v-model:show="show" @close="emit('close')" round overlay-class="mask" :close-on-popstate="true">
            <div class="main"
                :class="{ 'popup-task-main': props.type === 'task', 'withdraw': props.type === 'withdraw' }">
                <template v-if="props.type === 'normal'">
                    <div class="normal">
                        <div class="normal-wrapper">
                            <span class="normal-wrapper-title" v-if="props.showRewardsWord">CONGRATULATIONS!</span>
                            <slot>
                                <div class="normal-wrapper-content">
                                    <div class="popup-slot">
                                        <div class="popup-slot-rewards" v-if="props.rewardsType === 'all'">
                                            <div class="popup-slot-rewards-item">
                                                <img src="@/assets/imgs/cash.png" alt="cash" width="50">
                                                <span class="yellow-text">+{{ props.cashNum }}</span>
                                            </div>
                                            <div class="popup-slot-rewards-item">
                                                <img src="@/assets/imgs/coin.png" alt="coin" width="50">
                                                <span class="yellow-text">+{{ props.coinNum }}</span>
                                            </div>
                                        </div>
                                        <template v-else>
                                            <img :src="rewardsImgUrl" :alt="props.rewardsType" width="50">
                                            <span class="yellow-text">+{{ props.rewardsNum }}</span>
                                        </template>
                                    </div>
                                </div>
                                <div class="normal-wrapper-tips" v-if="props.tips.length && props.displayTips">
                                    <span class="normal-wrapper-tips_span">{{ props.tips }}</span>
                                </div>
                            </slot>
                        </div>
                        <div class="normal-wrapper-btn" @click="handleThrowClickEvent">{{ buttonText }}</div>
                    </div>
                </template>
                <template v-if="props.type === 'task'">
                    <div class="popup-task-main-part">
                        <div class="popup-task-main-part-wrapper">
                            <slot></slot>
                        </div>
                        <div class="popup-task-main-part-btn" @click="handleThrowClickEvent">{{ buttonText }}</div>
                    </div>
                </template>
                <template v-if="props.type === 'withdraw'">
                    <div class="withdraw-main">
                        <img class="withdraw-main-bg" v-if="props.withdrawStatus" src="@/assets/imgs/popup/success.png"
                            alt="success">
                        <img class="withdraw-main-bg" v-else src="@/assets/imgs/popup/failed.png" alt="failed">
                        <div class="withdraw-main-slot">
                            <slot>

                            </slot>
                        </div>
                        <div class="withdraw-btn" :class="props.withdrawStatus ? 'success' : 'fail'"
                            @click="handleThrowClickEvent">
                            {{ props.withdrawStatus ? 'Get it' : 'I see' }}
                        </div>
                    </div>
                </template>
            </div>
        </van-popup>
    </div>
</template>

<style scoped lang="scss">
@import url(./index.scss);

.van-overlay::before {
    display: v-bind("props.type === 'withdraw' ? 'none' : 'block'");
    content: '';
    position: absolute;
    top: 50%;
    width: 100%;
    height: 100%;
    transform: translateY(-50%);
    background: url(@/assets/imgs/popup/aureole.png) no-repeat -21vmin center;
    background-size: 148vmin;
    z-index: 9;
    pointer-events: none;
}

:deep(.van-popup) {
    background: transparent;
}
</style>